<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a[attribute]{
            text-decoration: none;
        }
        a[attribute=value]{
            color: red;
        }
        a[attribute~="one"]{
            color: #017fcb;
        }
        a[attribute^="value1"]{
            color: #78b917;
        }
        a[attribute$="two"]{
            color: #f27c01;
        }
        a[attribute*="three"]{
            color: green;
        }

        a[attribute|="four"]{
            color: red;
        }
    </style>
</head>
<body>
<!--
属性选择器
    对带有指定属性的hmtl元素设置样式

1. Element[attribute]
    为带有attribute属性的Element元素设置样式

2. Element[attribute~="value"] *
    选择attribute属性包含单词value的属性元素，并设置其样式

3. Element[attribute^="value"]
    设置attribute属性值以value开头的所有Element元素样式

4. Element[attribute$="value"]
    设置attribute属性值以value结尾的所有Element元素样式

5. Element[attribute*="value"]
    设置attribute属性值包含value所有Element元素样式

6. Element[attribute|="value"] *
    设置attribute属性值为value或者value-开头的元素
-->

<a href="#">正常样式</a> <br>
<hr>
<p>Element[attribute]</p>
<a href="#" attribute="">带有属性 attribute</a><br>
<a href="#" attribute="value">attribute = value</a><br>
<hr>
<p>Element[attribute~="value"]</p>
<a href="#" attribute="two value">attribute = two value</a><br>
<a href="#" attribute="one value">attribute = one value</a><br>
<a href="#" attribute="one value">attribute = one value</a><br>
<hr>
<p>Element[attribute^="value"]</p>
<a href="#" attribute="value1">attribute = value1</a><br>
<a href="#" attribute="value11">attribute = value11</a><br>
<a href="#" attribute="value12">attribute = value12</a><br>
<a href="#" attribute="value13">attribute = value13</a><br>
<hr>
<p>Element[attribute$="value"]</p>
<a href="" attribute="a two">attribute = a two</a><br>
<a href="" attribute="b two">attribute = b two</a><br>

<p>Element[attribute*="value"]</p>
<a href="" attribute="a three two">attribute = a three two</a><br>
<a href="" attribute="b three two">attribute = b three two</a><br>

<p>Element[attribute|="value"]</p>
<a href="" attribute="four">attribute = four</a><br>
<a href="" attribute="four-one">attribute = four-one</a><br>
</body>
</html>